
<template>
    <div class="card-header" style="margin-bottom:12px;">
        <span class="card-title">系统盘</span>
    </div>

    <div class="card-info-wrap">
        <span class="card-info">总量：<span class="num">{{ printSize(monitorInfo?.InstancePhysicalState?.systemDiskSize) }} </span></span>
        <span class="card-info">已用：<span class="num">{{ ((monitorInfo?.InstancePhysicalState?.systemDiskUsedSize / monitorInfo?.InstancePhysicalState?.systemDiskSize) *
            100).toFixed(0) || 0
        }} %</span></span>
    </div>

    <div class="card-content" style="height:256px;">
        <div id="charts" ref="charts" style="width:100%;height:100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue'
import { printSize } from '@/libs/util.common'

const props = defineProps({
    monitorInfo: {
        type: Object,
        default: {}
    }
});

watch(() => props.monitorInfo, () => {
    init()
})

// 初始化表格
let myChart = null
const charts = ref()
function init() {
    myChart = echarts.init(charts.value);
    let option = {
        title: {
            text: (((props.monitorInfo?.InstancePhysicalState?.systemDiskUsedSize / props.monitorInfo?.InstancePhysicalState?.systemDiskSize) * 100).toFixed(0) + '%'),
            x: "center",
            y: "center",
            textStyle: {
                color: "#07F",
                fontSize: 30,
                fontWeight: "normal",
            },
        },
        series: [
            {
                type: "pie",
                radius: [100, 130],
                center: ["50%", "50%"],
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: props.monitorInfo?.InstancePhysicalState?.systemDiskUsedSize,
                        itemStyle: {
                            color: "#07F"
                        },
                    },
                    {
                        value: props.monitorInfo?.InstancePhysicalState?.systemDiskSize - props.monitorInfo?.InstancePhysicalState?.systemDiskUsedSize,
                        itemStyle: {
                            color: "transparent",
                        },
                    },
                ],
            },
            {
                type: "pie",
                radius: [110, 120],
                center: ["50%", "50%"],
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: props.monitorInfo?.InstancePhysicalState?.systemDiskUsedSize,
                        itemStyle: {
                            color: "transparent",
                        },
                    },
                    {
                        value: props.monitorInfo?.InstancePhysicalState?.systemDiskSize - props.monitorInfo?.InstancePhysicalState?.systemDiskUsedSize,
                        itemStyle: {
                            color: "#DCE6F0"
                        },
                    },
                ],
            },
        ],
    };

    option && myChart.setOption(option);
}

/**
 * 页面初始化
 */
onMounted(async () => {
    init()
});

</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .card-title {
        font-weight: 550;
        color: #223354;
        margin-right: 20px;
    }

    .card-opt {
        margin-left: auto;
    }
}

.card-info-wrap {
    .card-info {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 40px;
    }

    .num {
        color: #3F73F6;
        font-family: PingFang SC;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
}


.card-content {
    display: flex;
}
</style>
